CognitoユーザープールでGoogleアカウントでサインインできるようにする
概要
CognitoのユーザープールのフェデレーテッドIDプロバーダーとしてGoogleを設定します。 この設定を行うことで、Googleアカウントを利用してサインインが可能になります。 今回はAWSの公式ドキュメントを参考に作業していきます。
全体の流れ
以下のような流れで設定を行います。
- ユーザープールの作成
- GoogleでのOAuthの設定
- ユーザープールでのフェデレーテッドIdPの設定
1 ユーザープールの作成
1.1 ユーザープールの作成
はじめにユーザープールを作成します。 このユーザープール内にアカウントが作成されます。 今回は「GoogleExample」という名前で作成します。 簡略化のためデフォルト値で作成します。
最終的な設定は以下のようになります。
1.2 アプリケーションクライアントの作成
アプリケーションから使用するためのクライアントを作成します。
設定はデフォルト値のままです。 名前は「SomeWebApp」としました。 Webアプリケーションでの使用を想定しています。
1.3 ドメイン名の設定
このアプリケーションが認証のエンドポイントとして利用するドメインを設定します。 今回は用意されているドメインのサブドメインとして設定します。 自分が所持しているドメインを設定することも可能です。
2 GoogleでのOAuthの設定
Cognitoユーザプールが使用するOAuthの認証情報を取得するのがここでの目標です。
2.1 プロジェクトの作成
Google APIコンソールで新しいプロジェクトを作成します。 今回は名前を「Cognito」としています。
2.2 OAuth同意画面の設定をする
ここではOAuthを使用してソーシャルサインインする際に出てくる画面に表示する情報の設定ができます。
ナビゲージョンペインの「OAuth同意画面」を選択し、そこで作成できます。
今回は「内部」で作成します。同じ組織内のアカウントだけがサインインできます。
全てのGoogleアカウントでサインインできるようにするには「外部」で作成してください。
OAuth同意画面の設定を行います。
「認証されたドメイン」には「amazoncognito.com」を入力します。
2.3 クライアントの認証情報を取得する
OAuthのクライアント（ここではCognito）が使用する認証情報を取得します。
まず初めにクライアントを「認証情報」のペインからクライアントを「OAuthIDの作成」で作成します。
「認証済みのJavaScript生成元」には「https://{yourDomainPrefix}.auth.region.amazoncognito.com」
「認証済みのリダイレクトURL」には「https://{yourDomainPrefix}.auth.region.amazoncognito.com/oauth2/idpresponse」
を入力してください。
この{yourDomainPrefix}は1.3で設定したCognitoユーザープールのドメインを入れてください。
作成が成功すると「クライアントID」と「クライアントシークレット」が表示されます。 これは後で使うので安全なところにメモしておきましょう。JSONでダウンロードすることも可能です。
3 ユーザープールでのフェデレーテッドIdPの設定
最後に先ほど作成したGoogleのOAuthクラントとユーザープールを連携させれば作業は終わりです。
3.1 フェデレーティッドIdPの設定
ペインの下の方にある「IDプール」でGoogle経由でのサインインを許可します。 先ほど取得した認証情報を入力します。
「スコープの承認」には「profile email openid」と入力します。プレースホルダーと同じです。
最後に有効にするを選択すれば終わりです。
3.2 Googleの認証情報をユーザプールへマッピングする
今回はGoogleの認証情報の「email」をCognitoの「Email」へマッピングします。
変更を保存するを選択すれば終わりです。
3.3 ユーザープールのアプリクライアントの設定を変更する
有効なIDプロバイダーのGoogleにチェックを入れて、許可されているOAuthフローをImplicitにします。 用途によって適切なフローを選ぶ必要がありますが、今回は簡略化のためにImplictにしています。
コールバックURLはサインイン後リダイレクトされる場所です。サインアウトURLはサインアウト後にリダイレクトされるURLです。
アプリケーションごとに適切な値を入れましょう。今回はアプリケーションがないのでlocalhostにしています。
これで全ての作業は終了です。
動作確認
先ほどの画面のホストしたUIをクリックしてサインイン画面を見てみます。
Googleでのサインインボタンがあります。 これを押してサインインしてみます。
するとhttps://localhostにリダイレクトされ、URLのパラメータにトークンが含まれています。
これは認証フローをImplicitにしたためです。
これはJWTトークンなのでjwt.ioで中身を見てみます。
Cognitoが発行していることがわかりました。 あとはこのトークンをリクエストに埋め込んで、サーバー側で検証すれば認証できます。
感想
作業は若干長いですが、それでも簡単にGoogleでのサインインを実現することができました。 認証機能をマイクロサービスとして使えるので便利だと思います。
